Este efecto tan curioso que vamos a ver es de Dynamicdrive y seguramente ya lo vimos con anterioridad en algunas páginas de wallpapers, lo que conseguimos es mostrar una imagen pequeña y al pasar el puntero del ratón visualizar los detalles de dicha imagen con efecto zoom con la posibilidad de acercar más la imagen con la rueda del ratón.


Se consigue gracias a jQuery y si estamos utilizando otra librería no es problema porque podemos conseguir mostrar el ejemplo en un iframe, es decir, añadir el script y los estilos en otro blog y mostrarlos allí donde deseamos. Ver explicaciones en Vagabundia sobre Blogger ultra super minimizado

Ahora si que es el momento de poner manos a la obra porque aunque a simple vista de la sensación de ser algo complicado en realidad no lo es si entendemos su funcionamiento.

Para empezar conseguimos dos imágenes iguales, una de gran tamaño para el efecto zoom que nos permitirá ver los detalles de la imagen y otra de menor tamaño que será la que se mostrará nada más cargar la página.

Una vez tenemos las dos imágenes nos situamos en plantilla edición de HTML, allí localizamos </head> y justo antes añadimos lo siguiente:
(Si ya estamos utilizando jQuery omitimos este paso porque quiere decir que ya tenemos jquery.min.js añadido )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Justo después añadimos el contenido de este archivo.
Guardamos los cambios para no perderlos y nos familiarizamos con lo que añadimos:

Allí podemos ver en primer lugar los estilos de la imagen del zoom y a continuación el script más extenso. Al principio del primer script veremos la siguientes líneas:

jQuery.noConflict()

var featuredimagezoomer={
loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1UUqQnSh8QKtptdiQshsJvKdQRmww6OXyVVHJyU4JDLmXNfCNsIrLlSGZ6Ull7q8czktFNpPeNAQQSjClmmEZwkZlnrYtOPn9ecHX3oI1Mnyjd2PArIDgrChOGmHjykOz17JdyA/s0/spinningred.gif', //full path or URL to "loading" gif

Lo marcado en color rojo es la imagen de carga que podemos cambiar por otra simplemente sustituyendo la url de la imagen.

El siguiente script es el sitio para añadir la url de la imagen grande y también especificar el tamaño que se mostrará en el zoom.

$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
largeimage: 'url-imagen-1' //<-- No comma after last option!
}

Donde url-image-1 añadimos la primera imagen grande.
El primer valor es para la anchura de la imagen que nos mostrará el zoom, el segundo valor será para la altura
Si mostramos el efecto en una entrada debemos tener en cuenta el ancho de la miniatura y el que especificamos para la imagen del zoom porque la suma de los dos anchos no debe ser superior a nuestras entradas de lo contrario nos creará problemas y no quedará demasiado bien estéticamente.

Para añadir el efecto más de una vez, procedemos de la misma forma que la anterior,  lo haremos a continuación donde dice #image2. Veremos que a continuación tenemos preparado para añadir una tercera imagen a falta de añadir las propiedades de imagen, si dudamos también podemos copiar el código anterior y cambiar de forma que sea #image3 ó #image4 y así sucesivamente.

$('#image3').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-3' //<-- No comma after last option!
})

Terminamos con la plantilla guardando los cambios y nos dirigimos justo al sitio que deseamos mostrar el efecto. Si es un gadget editamos un gadget de HTML. En el interior del gadget o entrada añadimos lo siguiente:
<img border="0" height="160" id="image1" src="url-imagen-pequeña" width="200" />

Con width establecemos la anchura de la imagen pequeña y con height la altura, sin olvidar que deben ser iguales las dos imágenes, y a su vez coinciden con la misma  id.
Bloguero

Esto de Jquery es una caja de sorpresas, es algo elengatísimo y original.

Como siempre chapó para ti por la labor que haces. Los blogs no serían ni la mitad de lo que son sin gente como tu.

Saludos y pa'lante como los de Alicante :)

Responder
Unknown

Hola Gem@ tu mereces ser la ganadora del concurso 20blogs.

Por esa razón publicamos un post en nuestra webs de Libros, haciendo un llamado que voten por tí.

Saludos y suerte!

PD: Ver Post AQUÍ

Responder
Joan Irazu

me gusto ;)

Responder
Gem@

:: Gracias por el comentario Daniel :D

:: Todo tuyo CHiCken ;)

Responder
Gem@

:: gratodo muchas gracias por el comentario y ese pedazo entrada que me hiciste :D

Responder
MexaaC

WOW! :D

Responder
Gem@

:: Entiendo con eso que te gusta N.G. - C.W. :D

Responder
La hormiguita

Está bueno... gracias es muy bonito :)

Responder
Adrián J. Messina

Hola Gem@, me parece super interesante.
Déjame comentarte que este efecto lo utilizan en la página de Liam Gallagher, el ex vocalista de Oasis en su página correspondiente a la promoción de su propia línea de ropa, Pretty Green.
Un detalle para enaltecer e internacionalizar un efecto tan interesante.

Saludos.

Responder
Gem@

:: Me alegra que te guste La hormiguita :)

:: Adrián J. Messina gracias por el comentario y el dato, voy a buscar esa página para ver el diseño y el efecto :D

Responder
ZAS

Hola Gem@:
Me encantan tus propuestas y la facilidad con la que expones las nuevas tecnologías.
Me gustaría sugerirte que conocieras el trabajo de Eugenio Tisselli. Éste es un artista digital que utiliza de manera mágica y sorprendente las nuevas tecnologías para crear poesía.

Creo dentro de poco comenzarán sus cursos (online y presenciales) en el Laboratorio de Escritura: http://laboratoriodeescritura.com/laboratorio/cursos-presenciales/eliteratura-creacion-literaria-en-medios-digitales.php

También tiene una web propia en la que hace "poesía virtual interactiva". Una pasada!! http://motorhueso.net/

Responder
Gem@

:: Me alegra sea de tu agrado el blog ZAS y agradezco la recomendación tan interesante :D

Responder
Oskar

Hola, muy bueno tu blog, mañana con tu permiso lo pondre en mis webs amigas, ahora no puedo que me voy a ver el futbolllllll....
No por que me guste si no por el aburrimiento que tengo encima.
Saludos

Responder
Gem@

:: Di que si Oskar que lo primero es lo primero, mi Cartagena perdió ayer fuera de casa :(

Responder
LA MIRADA ESPECIAL

Enhorabuena Gema por el blog tan fantástico que tienes, lo conocí en este curso Premios 20 blogs y lo voté en la categoría de ciencia y tecnología. Te doy las gracias por el comentario que has realizado en mi blog La Mirada Especial.

Un saludo y espero que ganes el concurso.

Paco Navas.

Responder
Gem@

:: Muchas gracias Paco, cada vez son más los blogs sobre enseñanza, es un buen recurso y una forma amena de hacer llegar información si a eso añadimos que la participación es mayor el objetivo se cumple con creces.
Agradezco mucho el voto y tus palabras, que gane o no eso es otra historia pero por lo pronto he conocido sitios interesantes y grandes bloggers. Un saludo cordial :)

Responder
Oskar

Hola Gem@, lo dicho ya tienes un baner en mis webs amigas, si no te gusta lo quito, lo quemo, lo rompo, noooooooooooo es broma.
Siento que perdierna tu equipo, pero ya sabes lo que dicen ( el futbol es asi) ya te comente que no soy futbolero pero la fiesta es la fiesta jajaja, Saludos y ¡¡Aupa el Cartagena!!
Chao.
http://elmiradordelared.blogspot.com/

Responder
Gem@

:: Oskar pero cómo lo vas a quitar con lo lindo que queda? :)
El deporte es así, una veces se pierde y otras se gana. Pero que rabia :(

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top